<template>
  <div class="website-footer-main">
    <div class="website-footer-wrap flex align-center space-center">
      <div class="flex space-between">
        <div class="flex">
          <template v-for="(v, i) in footerData" :key="i">
            <div v-if="i != footerData.length - 1" class="footer-instructions">
              <div class="footer-title ellipsis mb23 fw-800">{{ v.name }}</div>
              <div
                v-for="(item, i) in v.data"
                :key="i"
                class="ellipsis mb23 fw-500 cursor"
                @click="goUrl(item.url)"
              >
                {{ item.name }}
              </div>
            </div>
            <div v-else class="footer-instructions connection">
              <div class="footer-title ellipsis mb23 fw-800">{{ v.name }}</div>
              <div
                v-for="(item, i) in v.data"
                :key="i"
                class="flex form-line mb23"
              >
                <div class="label">{{ item.name }}：</div>
                <div class="value">{{ item.value }}</div>
              </div>
            </div>
          </template>
          <div class="footer-instructions" style="margin-left: 80px">
            <img class="footer-logo" src="@img/footer-logo.png" alt="" />
            <div class="platform-icon-list ml15 flex" style="margin-top: 90px">
              <a
                class="platform-icon"
                href="https://www.instagram.com/p/CgURF4asodF/?igsh=MXEwaGxteGsxcTUzbQ=="
                target="_blank"
              >
                <img src="@img/ins.png" class="ins-icon" />
              </a>
              <a
                class="platform-icon"
                href="https://youtube.com/@mihunterscooter?si=u41IVufcNc_fU-jD"
                target="_blank"
              >
                <img src="@img/youtube.png" class="youtube-icon" />
              </a>
            </div>
            <div class="web-instructions ml15">
              ©2024 Zhejiang Mihunter Technology Co., Ltd.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const { footerData } = useData()

const goUrl = (url) => {
  window.open(url)
}
</script>
<style lang="scss">
.website-footer-main {
  width: 100%;
  background: #272727;
  height: 400px;
  .website-footer-wrap {
    width: 1200px;
    margin: 0 auto;
    .form-line {
      max-width: 251px;
    }
  }
  .web-instructions {
    font-size: 12px;
    margin-top: 17px;
  }
  .footer-instructions {
    padding-top: 90px;
    margin-right: 70px;
    &.connection {
      margin-right: 0px;
    }
    &:last-child {
      margin-right: 0px;
    }
    .footer-title {
      font-size: 20px;
      color: #ffffff;
    }
    font-size: 16px;
    color: rgba(255, 255, 255, 0.65);
    .label {
      color: #ffffff;
    }
    .value {
      max-width: 254px;
    }
  }
  .mb23 {
    margin-bottom: 23px;
  }
  .footer-logo {
    width: 280px;
    height: 68px;
  }
  .platform-icon {
    margin-right: 24px;
  }
}
.cursor {
  cursor: pointer;
}
</style>
